<template>
    <div class="mainContent">
        <div class="search searchBox">
            <div class="left">
                <Tabs v-model="tabActiveName"  @on-click="setTabClick">
                    <TabPane :label="`待处理（${isCount>99?'99+':isCount}）`" name="0"></TabPane>
                    <TabPane :label="`已处理（${count>99?'99+':count}）`" name="1"></TabPane>
                </Tabs>
            </div>
            <div class="right">
                <DatePicker type="daterange" :options="options" :clearable="true" v-model="dateArr" v-if="inputShow" format="yyyy-MM-dd HH:mm:ss" placement="top" transfer  placeholder="请选择日期" style="width: 300px;" @on-change="getDateArr" ></DatePicker>
                <DatePicker type="daterange" format="yyyy-MM-dd" placement="top"  placeholder="请选择日期" v-if="inputShow" style="opacity:0;position: absolute;top:-9999px;width:1px;"></DatePicker>
                <el-button type="primary" size="small"  plain style="margin-left:20px" v-if="handleType&&auth.isAll" :disabled="warnIdList.length == 0" @click="allhandle">批量处理</el-button>
            </div>
        </div> 
        <div class="tableBox">
            <div class="tableList">
                <el-table :data="list" style="width: 100%"  @row-click="getHandleDetails" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" > </el-table-column>
                    <el-table-column prop="triggerTime" label="报警时间" class-name="padding_left"></el-table-column>
                    <el-table-column prop="name" label="报警设备"></el-table-column>
                    <el-table-column label="报警类型">
                        <template slot-scope="scope">
                            {{scope.row.ruleType| ruleNameFilter(ruleTypeList)}}
                        </template>
                    </el-table-column>
                    <el-table-column label="报警详情">
                        <template slot-scope="scope">
                            {{scope.row.triggerValue?scope.row.triggerValue:'暂无'}}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="state == 1" prop="handleTime" label="处理时间"></el-table-column>
                    <el-table-column v-if="state == 1" prop="handleUserName" label="处理人"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="80px" align="center" v-if="auth.isdeal">
                        <template slot-scope="scope">
                            <el-button v-if="state == 1" @click.stop="handle(scope.row)" type="text" size="small" style="color:#00AFFB">查看详情</el-button>
                            <el-button v-if="state == 0" @click.stop="handle(scope.row)" type="text" size="small" style="color:#00AFFB">处理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="list.length>0">
                <Page v-if="totalCount" :current.sync="pageNum" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
            </div>
        </div>
        
        <Modal v-model="handleModal" width="800px" :mask-closable="false" :title="isAdd?'报警信息处理':'报警信息详情'" class-name='msgModal'>
            <div class="msgBox">
                <div class="info">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>设备信息</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left">
                            <div class="list">
                                <div class="item" style="width:100%">
                                    <span class="span">设备类型:</span>
                                    <span class="span">{{deviceType }}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item" style="width:100%">
                                    <span class="span">设备名称:</span>
                                    <span class="span">{{name}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="info" style="margin-top:20px;">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警信息</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left" style="width:100%;">
                            <div class="left" style="width:100%">
                            <div class="list">
                                <div class="item" style="width:100%">
                                    <span class="span">报警类型:</span>
                                    <span class="span">{{ruleType| ruleNameFilter(ruleTypeList)}}</span>
                                </div> 
                            </div>
                        </div>
                            <div class="list">
                                <div class="item" style="width:100%;">
                                    <span class="span">报警时间:</span>
                                    <span>{{triggerTime }}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item operatorList" style="align-items: flex-start;">
                                    <span class="span">报警详情:</span>
                                    <span class="span" style="width:200px;">{{triggerValue?triggerValue:'暂无'}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="info" style="margin-top:20px;">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警处理</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left" style="width:100%;">
                            <div class="list" v-if="!isAdd">
                                <div class="item">
                                    <span class="span">处理人:</span>
                                    <span class="span">{{handleUserName}}</span>
                                </div>
                            </div>
                            <div class="list" v-if="!isAdd">
                                <div class="item">
                                    <span class="span">处理时间:</span>
                                    <span class="span">{{handleTime}}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item" style="width:100%; align-items: flex-start;">
                                    <i class="tip" v-if="isAdd">*</i>
                                    <span class="span" >报警原因:</span>
                                    <span class="span" style="width:500px;white-space:normal;word-wrap: break-word;" v-if="!isAdd">{{handleRemark}}</span>
                                </div>
                            </div>
                            <div class="list inputMsg" v-if="isAdd">
                                <div class="item" style="width:100%;">
                                    <el-input  v-model="handleRemark" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width:100%;margin:0 auto;font-size:14px"></el-input>
                                </div>
                            </div>
                            <div class="list" >
                                <div class="item" style="width:100%; align-items: flex-start;">
                                    <i class="tip" v-if="isAdd">*</i>
                                    <span class="span" >处理结果:</span>
                                    <span class="span" style="width:500px;;white-space:normal;word-wrap: break-word;" v-if="!isAdd">{{handleResult}}</span>
                                </div>
                            </div>
                            <div class="list inputMsg" v-if="isAdd">
                                <div class="item" style="width:100%;">
                                    <el-input v-model="handleResult" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 100%;margin: 0 auto;font-size:14px"></el-input>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(0)" style="padding:7px 25px;border-radius: 15px;background:#fff;border:1px solid #00ACFB;" type="info" size="mini" v-if="isAdd"><span  class="text" style="color:#00ACFB;">取消</span> </el-button>
                <el-button @click="ok(0)" type="primary" v-if="isAdd"  style="padding:7px 25px;border-radius: 15px;background:#fff;border:1px solid #00ACFB;" size="mini"   v-preventReClick="1500"><span  class="text" style="color:#00ACFB;">确定</span></el-button>
            </div>
        </Modal>

        <Modal v-model="Modal" title="报警信息处理" width="360px;" :mask-closable="false" class-name='msgModal'>
            <p style="width:100%;text-align:center;font-size:16px;color:#919192;margin:20px auto;">
                处理消息一旦确认，就无法更改！
            </p>
            <div style="width:100%;text-align:center;font-size:16px;color:#919192;margin:20px auto;">
                您是否确认处理结果？
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" style="padding:7px 25px;border-radius: 15px;background:#fff;border:1px solid #00ACFB;" type="info" size="mini"><span  class="text" style="color:#00ACFB;">取消</span> </el-button>
                <el-button @click="submit" type="primary"  style="padding:7px 25px;border-radius: 15px;background:#fff;border:1px solid #00ACFB;" size="mini"  v-preventReClick="1500"><span  class="text" style="color:#00ACFB;">确定</span></el-button>
            </div>
        </Modal>

        <Modal v-model="allhandleModal" width="800px" :mask-closable="false" title="报警信息处理" class-name="msgModal">
            <div class="msgBox">
                <div class="info" style="margin-top:20px;">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警处理</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left" style="width:100%;">
                            <div class="list">
                                <div class="item" style="width:100%;">
                                    <i class="tip"  style="color:red">*</i>
                                    <span class="span" >报警原因:</span>
                                </div>
                            </div>
                            <div class="list inputMsg">
                                <div class="item" style="width:100%;">
                                    <el-input  v-model="allhandleRemark" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width:100%;margin:0 auto;font-size:14px"></el-input>
                                </div>
                            </div>
                            <div class="list" >
                                <div class="item" style="width:100%;">
                                    <i class="tip"  style="color:red">*</i>
                                    <span class="span" >处理结果:</span>
                                </div>
                            </div>
                            <div class="list inputMsg" >
                                <div class="item" style="width:100%;">
                                    <el-input v-model="allhandleResult" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 100%;margin: 0 auto;font-size:14px"></el-input>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(3)" style="padding:7px 25px;border-radius: 15px;background:rgba(46, 104, 253, 0.16);border:1px solid rgba(46, 104, 253, 0.16);" type="info" size="mini" ><span style="color:#1891FF;">取消</span> </el-button>
                <el-button @click="ok(1)" type="primary"  style="padding:7px 25px;border-radius: 15px;background:#1891FF;border:1px solid #1891FF;" size="mini"   v-preventReClick="1500"><span style="color:#fff;">确定</span></el-button>
            </div>
        </Modal>
    </div>
</template>
<script>
import {
    getEnvRecordHandle,
    getEnvRecordDetails,
    getEnvRecordlist,
    getEvnWarnCount,
    getEnvRecordBatchHandle,
} from "@/api/api.js";
import { getAmmeterWarnRule } from "@/api/energy"
export default {
    name:"warnRecord",
    data() {
        return {
            deviceRecordType: 14,
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            pageSize: 10,
            pageNum: 1,
            totalCount: 0,
            ruleTypeList: [],
            list: [],
            dateArr: [],
            flag: true,
            state: 0,
            handleModal: false,
            inputShow: false,
            isAdd: false,
            handleRemark: "",
            handleResult: "",
            deviceType: "",
            name: "",
            ruleType: "",
            triggerTime: "",
            triggerValue: "",
            handleTime: "",
            handleUserName: "",
            warnId: "",
            Modal: false,
            count: 0,
            isCount: 0,
            deptId: "",
            tabActiveName:'0',
            warnIdList:[],
            allhandleModal:false,
            allhandleRemark:"",
            allhandleResult:"",
            handleFlag:false,
            handleType:true,
            auth:{
                isAll: false,
                isdeal: false,
            },
            btnList:[] //权限列表
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.pageNum = 1;
                this.dateArr = [];
                this.initData();
                this.getAllList();
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getWarnRuleList()
        this.getAllList();
        this.btnList = JSON.parse(localStorage.getItem("arr"));//localStorage当中的arr项存取的是按钮权限列表
        this.initAuth() //初始化权限
        this.initData();
        setTimeout(()=>{
            this.inputShow = true;
        },1)
    },
    methods: {
        /**
         * @description: 初始化权限操作
         */        
        initAuth(){
            this.auth.isAll = this.btnList.includes('energy/ammeter/record/allDeal')
            this.auth.isdeal = this.btnList.includes('energy/ammeter/record/deal')
        },

        initData(){
            this.getIsCountFn();
            this.getCountFn();
        },

        /* 获取报警类型 */
        getWarnRuleList(){
            getAmmeterWarnRule().then(res=>{
                this.ruleTypeList = res.data
            })
        },

        //获取待整改
        getIsCountFn() {
            let parmas = {
                deptId: this.deptId,
                state: 0,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                startTime: this.dateArr[0],
                endTime: this.dateArr[1],
                deviceType:this.deviceRecordType,
            };
            getEnvRecordlist(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.isCount = res.data.total;
                        if(this.state == 0 ){
                            this.totalCount = res.data.total;
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //获取已整改
        getCountFn() {
            let parmas = {
                deptId: this.deptId,
                state: 1,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                startTime: this.dateArr[0],
                endTime: this.dateArr[1],
                deviceType:this.deviceRecordType,
            };
            getEnvRecordlist(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.count = res.data.total;
                        if(this.state == 1 ){
                            this.totalCount = res.data.total;
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        setTabClick(name) {
            if(name==='0'){
               this.gethandle() ;
               this.handleType = true;
            }else if(name==="1"){
                this.getYhandle() ;
                this.handleType = false;
            }
        },

        //获取列表
        getAllList() {
            this.totalCount = '';
            let parmas = {
                deptId: this.deptId,
                state: this.state,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                startTime: this.dateArr[0],
                endTime: this.dateArr[1],
                deviceType:this.deviceRecordType,
            };
            getEnvRecordlist(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getDateArr(i,v){
            this.dateArr = i;
            this.pageNum = 1;
            this.getAllList();
            this.initData();
            this.getEvnWarnCountFn();
        },
        gethandle() {
            this.flag = true;
            this.list = [];
            this.state = 0;
            this.pageNum = 1;
            this.getAllList();
        },
        getYhandle() {
            this.flag = false;
            this.list = [];
            this.state = 1;
            this.pageNum = 1;
            this.getAllList();
        },
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        getHandleDetails(row) {
            if(this.auth.isdeal){
                this.warnId = row.id;
                this.getDetails(row.id);
            }
        },
        handle(item) {
            this.warnId = item.id;
            this.getDetails(item.id);
        },
        getDetails(id) {
            let parmas = {
                id: id
            };
            getEnvRecordDetails(parmas)
                .then(res => {
                    if (res.code == 200) {
                        if (res.data.handleState == 1) {
                            this.handleRemark = res.data.handleRemark;
                            this.handleResult = res.data.handleResult;
                            this.isAdd = false;
                        } else if (res.data.handleState == 0) {
                            this.handleRemark = "";
                            this.handleResult = "";
                            this.isAdd = true;
                        }
                        this.handleModal = true;
                        this.deviceType = res.data.deviceType;
                        this.name = res.data.name;
                        this.ruleType = res.data.ruleType;
                        this.triggerTime = res.data.triggerTime;
                        this.triggerValue = res.data.triggerValue;
                        this.handleTime = res.data.handleTime;
                        this.handleUserName = res.data.handleUserName;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        ok(type) {
            if(type == 0) {
                if (this.handleRemark == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写报警原因"
                    });
                    return;
                }
                if (this.handleResult == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写处理结果"
                    });
                    return;
                }
                this.handleFlag = false;
            } else if (type == 1) {
                if (this.allhandleRemark == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写报警原因"
                    });
                    return;
                }
                if (this.allhandleResult == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写处理结果"
                    });
                    return;
                }
                this.handleFlag = true;
            }
            this.Modal = true;
        },
        submit() {
            if(!this.handleFlag) {
                let parmas = {
                    warnId: this.warnId,
                    handleResult: this.handleResult,
                    handleRemark: this.handleRemark
                };
                getEnvRecordHandle(parmas)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.pageNum = 1;
                            this.getAllList();
                            this.initData();
                            this.getEvnWarnCountFn();
                            this.handleModal = false;
                            this.Modal = false;
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else {
                let parmas = {
                    warnIdList: this.warnIdList,
                    handleResult: this.allhandleResult,
                    handleRemark: this.allhandleRemark
                };
                getEnvRecordBatchHandle(parmas)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.pageNum = 1;
                            this.getAllList();
                            this.initData();
                            this.getEvnWarnCountFn();
                            this.allhandleModal = false;
                            this.Modal = false;
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
            
        },
        cancel(type) {
            if (type == 0) {
                this.handleModal = false;
            } else if (type == 1) {
                this.Modal = false;
            } else if (type == 3) {
                this.allhandleModal = false;
            }
        },
        handleSelectionChange(val){
            this.warnIdList =[];
            val.forEach(i=>{
                this.warnIdList.push(i.id)
            })
        },
        allhandle(){
            this.allhandleResult = "",
            this.allhandleRemark = "";
            this.allhandleModal = true;
        }
    },
    filters:{
        ruleNameFilter(key, list){
            let label = ""
            list.forEach(element => {
                if(element.ruleType === key){
                    label = element.name
                }
            })
            return label
        }
    }
};
</script>

<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
</style>

<style scoped lang="scss">
@import "./../../assets/style/warn.less";
@import "./../../assets/style/evn/evn.scss";
@import "./../../assets/style/evn/msgModal.scss";
.mainContent{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .searchBox{
        padding: 20px 20px 10px;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .tableBox{
        margin-top: 10px;
        padding: 20px;
        background-color: #ffffff;
    }
}
</style>
